<template>
    <section>
        <!--列表-->
        <div class="panel panel-padd-40">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">数据对照</span></strong>
            </div>
            <div class="body-content">
                <section>
                    <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                        <el-tab-pane v-for="item in tabapiMap" :label="item.tabName" :name="item.code" :key="item.code"/>
                    </el-tabs>
                </section>
                <!-- tab栏数据 -->
                <div class="dataCom">
                    <div v-show="activeName === '1'">
                        <!-- 一键更新 一键结算操作 -->
                        <el-form :inline="true" style="margin-left:20px;">
                            <el-form-item>
                                <el-button type="primary" size="mini" @click="updateByBatchIdAndStatus">一键更新</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" size="mini" @click="dialogVisible = true">一键结算</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- 查询操作 -->
                        <el-form :inline="true" style="margin-left:20px;">
                            <el-form-item label="姓名:">
                                <el-input v-model.trim="searchForm.matchedOrderName" placeholder="请输入姓名" clearable size="mini" style="width:130px;"/>
                            </el-form-item>
                            <el-form-item label="手机号:">
                                <el-input v-model.trim="searchForm.matchedOrderMobile" placeholder="请输入手机号" clearable size="mini" style="width:130px;"/>
                            </el-form-item>
                            <el-form-item label="订单状态:">
                                <el-select v-model="orderStatus" size="mini" placeholder="请选择" style="width:130px;">
                                    <el-option label="全部" value=""/>
                                    <el-option v-for="(key,value) in orderstatusData" :key="key" :label="key" :value="value"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="审核状态:">
                                <el-select v-model="orderVerifyStatus" size="mini" placeholder="请选择" style="width:130px;">
                                    <el-option label="全部" value=""/>
                                    <el-option v-for="(key,value) in orderVerifyData" :key="key" :label="key" :value="value"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" size="mini" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table :data="tableData" border v-loading='listLoading' element-loading-text="拼命加载中" ref="table" stripe>
                        <el-table-column v-if="activeName === '1' || activeName === '2'" type="expand">
                            <template slot-scope="props">
                                <el-table :data="props.row.orderVoList" border stripe>
                                    <el-table-column prop="autoId" label="订单号"/>
                                    <el-table-column prop="bankName" label="所属银行"/>
                                    <el-table-column prop="createTime" label="申请日期"/>
                                    <el-table-column prop="trueName" label="姓名"/>
                                    <el-table-column prop="mobile" label="手机号" width="130"/>
                                    <el-table-column prop="statusDesc" label="办卡状态"/>
                                    <el-table-column prop="orderNo" label="进件单号"/>
                                    <el-table-column prop="verifyStatusDesc" label="审核状态"/>
                                    <!-- <el-table-column prop="bonusAmount" label="奖励金额">
                                </el-table-column> -->
                                    <el-table-column prop="isFirst" label="是否新户" width="60"/>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button v-if="scope.row.status === 1 || scope.row.status === 2 || scope.row.isFirst !== '是'" type="primary" size="mini" @click='updataOrder(props.$index,scope.row.matchId)'>更新订单</el-button>
                                            <el-button v-if="scope.row.verifyStatus === 0 && scope.row.status === 3 && scope.row.isFirst === '是'" class="btnMargin" type="primary" size="mini" @click='settlement(props.$index,scope.row.matchId)'>结算</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="姓名"/>
                        <el-table-column prop="mobile" label="手机号"/>
                        <el-table-column label="是否新户" width="60">
                            <template slot-scope="scope">
                                {{scope.row.isNewCustomer === 1 ? '是' : '否'}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="submitTimeDesc" label="进件时间"/>
                        <el-table-column prop="passTimeDesc" label="核准日期"/>
                        <el-table-column prop="orderNo" label="进件单号"/>
                        <el-table-column prop="statusDesc" label="办卡状态"/>
                        <el-table-column prop="handleStatusDesc" label="处理状态"/>
                        <el-table-column prop="matchedOrderCount" label="匹配订单数量"/>
                    </el-table>
                </div>
                <div class="paginationMargin">
                    <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange"/>
                </div>
            </div>
            <el-dialog class="matchBatchVerify" :close-on-click-modal='closeOnClickModal' title="提示" :visible.sync="dialogVisible" width="30%">
                <span>是否确认一键结算？</span>
                <div style="color:red;">批量结算耗时稍长,请耐心等待</div>
                <div slot="footer">
                    <el-button size="small" v-show="!btnLoading" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" :loading="btnLoading" @click="confirmBatchVerify">{{btnLoading ? '结算中':'确 定'}}</el-button>
                </div>
            </el-dialog>
        </div>
    </section>
</template>

<script>
import {
    matchResultList,
    updateOrder,
    matchResultVerify,
    updateOrderByBatchIdAndStatus,
    matchResultBatchVerify
} from "../../api/api";
export default {
    data() {
        return {
            closeOnClickModal: false,

            activeName: "1",
            autoId: "",

            btnLoading: false,
            searchForm: {
                matchedOrderName: "", //姓名
                matchedOrderMobile: "" //手机号
            },
            dialogVisible: false,

            orderStatus: "", // 订单状态
            // 订单状态
            orderstatusData: {
                1: "新申请",
                2: "审核中",
                3: "审核通过",
                4: "审核拒绝",
                5: "已取消"
            },

            orderVerifyStatus: "", // 审核状态
            // 订单审核状态
            orderVerifyData: {
                0: "未审核",
                1: "待结算",
                2: "审核拒绝",
                3: "已结算"
            },
            // tab栏 对应code
            tabapiMap: [
                {
                    code: "1",
                    tabName: "唯一匹配"
                },
                {
                    code: "2",
                    tabName: "多个匹配"
                },
                {
                    code: "3",
                    tabName: "无匹配"
                }
            ],
            tableData: [], // 数据列表
            listLoading: false,
            currentPage: 1, // 当前页数
            pageCount: 1 // 总条数
        };
    },
    watch: {
        // 遍历将每一行都展开
        activeName() {
            if (this.activeName === "1") {
                const data = this.tableData;
                for (let i = 0; i < data.length; i++) {
                    this.$refs.table.toggleRowExpansion(
                        this.tableData[i],
                        true
                    ); //当前行展开
                }
            }
        }
    },
    methods: {
        // tab切换
        handleClick() {
            this.tableData = [];
            this.getMatchResultList();
        },
        // 分页点击方法
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getMatchResultList();
        },
        // 获取匹配结果列表
        getMatchResultList(index) {
            this.listLoading = true;
            matchResultList({
                matchedOrderName: this.searchForm.matchedOrderName,
                matchedOrderMobile: this.searchForm.matchedOrderMobile,
                matchedOrderCountType: this.activeName,
                orderCheckBatchId: this.autoId,
                orderStatus: this.orderStatus,
                orderVerifyStatus: this.orderVerifyStatus,
                pageNum: this.currentPage,
                pageSize: 10
            })
                .then(res => {
                    this.listLoading = false;
                    this.tableData = res.data.list;

                    // 第一个tab栏默认全部展开
                    if (this.activeName === "1") {
                        const data = this.tableData;
                        for (let i = 0; i < data.length; i++) {
                            this.$refs.table.toggleRowExpansion(
                                this.tableData[i],
                                true
                            ); //当前行展开
                        }
                    }
                    // 如果传入index下标 展开下标行
                    if (index !== undefined) {
                        this.$refs.table.toggleRowExpansion(
                            this.tableData[index],
                            true
                        ); //当前行展开
                    }

                    this.pageCount = res.data.pages;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 更新订单
        updataOrder(index, matchId) {
            this.$confirm("是否确认更新?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    updateOrder({
                        matchId: matchId
                    })
                        .then(() => {
                            this.$message.success("订单更新成功!");
                            this.getMatchResultList(index);
                        })
                        .catch(() => {
                            this.$message.error("网络挂啦，请求不到数据！");
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消更新"
                    });
                });
        },
        // 搜索
        searchBtn() {
            this.getMatchResultList();
        },
        // 点击更新
        updateByBatchIdAndStatus() {
            this.$confirm("是否确认一键更新?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    updateOrderByBatchIdAndStatus({
                        batchId: this.autoId
                        // status: this.status
                    })
                        .then(() => {
                            this.$message.success("订单更新成功!");
                            this.getMatchResultList();
                        })
                        .catch(() => {
                            this.$message.error("网络挂啦，请求不到数据！");
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消更新"
                    });
                });
        },
        // 结算
        settlement(index, matchId) {
            this.$confirm("是否确认结算?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    matchResultVerify({
                        matchId: matchId,
                        verifyStatus: 1
                    })
                        .then(() => {
                            this.$message.success("数据结算成功!");
                            this.getMatchResultList(index);
                        })
                        .catch(() => {
                            this.$message.error("网络挂啦，请求不到数据！");
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        },
        // 确定
        confirmBatchVerify() {
            this.btnLoading = true;
            matchResultBatchVerify({
                orderCheckBatchId: this.autoId,
                verifyStatus: 1
            })
                .then(() => {
                    this.btnLoading = false;
                    this.$message.success("批量结算成功!");
                    this.getMatchResultList();
                    this.dialogVisible = false;
                })
                .catch(() => {
                    this.btnLoading = false;
                });
        }
    },
    mounted() {
        this.autoId = this.$route.query.autoId;
        this.getMatchResultList();
    }
};
</script>

<style>
.btnMargin {
    margin-top: 5px;
}

.dataCom .el-table__expanded-cell[class*="cell"] {
    padding: 10px 5px 5px 30px;
}

.tabs-pos {
    position: relative;
}

.search-pos {
    position: absolute;
    top: 0;
    right: 20px;
}

.matchBatchVerify .el-dialog__body {
    padding: 5px 20px;
}

.matchBatchVerify .el-dialog {
    margin-top: 30vh !important;
}
</style>
